<template>
    <div class="list">
        <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh">
            <van-list v-model="isUpLoading" :finished="finished" :finished-text="finishedText">
                <div class="item" v-for="(item, index) in list" :key="index">
                    <!-- 团队票order_status，待审核1， -->
                    <p :class="['van-row--flex van-row--justify-space-between', (item.order_status==2||item.order_status==3)?'':'cancel']">
                        <span>订单编号：{{item.order_sn}}</span>
                        <!-- <span v-if="item.order_status==3">待检票</span> -->
                        <span>{{item.order_status_show}}</span>
                    </p>
                    <div class="infobox van-row--flex ">
                        <van-image
                                width="140px"
                                height="105px"
                                fit="cover"
                                :src="require('../../../static/img/menpiao.png')"
                        />
                        <div class="info">
                            <div class="title van-multi-ellipsis--l2">天士力大健康城门票</div>

                            <div class="ic van-row--flex van-row--align-center">
                                <van-icon name="zhunbeiliangchan" class-prefix="icon" color="#323232" size="20px"/>
                                <span>{{item.order_type_show}}</span>
                            </div>
                            <div class="ic van-row--flex van-row--align-center">
                                <van-icon name="underway-o" color="#323232" size="20px"/>
                                <span>{{item.t_date}}</span>
                            </div>
                            <div class="ic van-row--flex van-row--align-center">
                                <van-icon name="jingqumenpiao" class-prefix="icon" color="#323232" size="20px"/>
                                <span>{{item.people_num}}张</span>
                            </div>
                        </div>
                    </div>
                    <div class="btns  van-row--flex van-row--justify-space-between  van-row--align-center">
                        <div class="price"><span>金额： </span><span class="money">￥{{item.order_amount}}</span></div>
                        <div class="btnbox van-row--flex van-row--align-center">
                            <div class="btn" @click="godetail(item)">查看详情</div>
                            <div class="btn pay" @click="payFor(item)" v-if="item.order_status==2">立即支付</div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
        <van-empty v-if="list.length==0"/>
    </div>
</template>

<script>
    import {myTicketorder, payTicket, perOrderStatus} from '@/http/interface'
    import wx from 'weixin-js-sdk'
    // import { perOrderDetail, payTicket, perOrderStatus } from '../../../http/interface'

    export default {
        name: "activelist",
        data() {
            return {
                isDownLoading: false,
                isUpLoading: false,
                finished: true,
                list: [],
                page: 0,
                limit: 4,
                loading: false,
                finishedText: '已经到底啦~',
                loopTimer: ''
            }
        },
        created() {
            // this._ActiveOrderLog()
            if (this.$route.query.api_token) {
                localStorage.setItem('api_token', this.$route.query.api_token || '');
            }
            this._myTicketorder()
        },
        methods: {
            _myTicketorder() {
                myTicketorder().then(res => {
                    // this.loading = true;
                    if (res.status == 1) {
                        this.list = res.data.orders
                        // if (this.list.length) {//当请求前有数据时 第n次请求
                        //     if (this.isUpLoading) {// 上拉加载
                        //         this.list = this.list.concat(res.data.orders) //上拉加载新数据添加到数组中
                        //         this.$nextTick(() => { //在下次 DOM 更新循环结束之后执行延迟回调
                        //             this.isUpLoading = false  //关闭上拉加载中
                        //         })
                        //         if (res.data.orders.length < this.limit) {//没有更多数据
                        //             this.finished = true   //上拉加载完毕
                        //         }
                        //     } else {
                        //         this.finished = true   //上拉加载完毕
                        //     }
                        //     if (this.isDownLoading) {//关闭下拉刷新
                        //         this.isDownLoading = false; //关闭下拉刷新中
                        //         this.list = res.data.orders; //重新给数据赋值
                        //         if (this.finished) { //如果上拉加载完毕为true则设为false。解决上拉加载完毕后再下拉刷新就不会执行上拉加载问题
                        //             this.finished = false
                        //         }
                        //     }
                        // } else {
                        //     this.isUpLoading = false; //关闭下拉刷新中
                        //     this.isDownLoading = false; //关闭下拉刷新中
                        //     this.list = res.data.orders;
                        //     if (this.list.length < this.limit) {
                        //         this.finishedText = ''
                        //     }
                        // }
                    }
                })
            },
            // onLoad() {
            //     this.page++;
            //     this.isUpLoading = true;
            //     this._myTicketorder();
            // },
            onRefresh() {
                this.isDownLoading = false;
                // this.page = 0;
                this._myTicketorder();
            },
            godetail(item) {
                if (item.order_type == 1) {
                    this.$router.push({
                        path: '/personDetail',
                        query: {
                            torder_id: item.torder_id
                        }
                    })
                } else {
                    this.$router.push({
                        path: '/teamDetail',
                        query: {
                            torder_id: item.torder_id
                        }
                    })
                }
            },
            async payFor(item) {
                if (item.order_type == 1) {
                    this.$router.push({
                        path: '/personOrder',
                        query: {
                            orderId: item.torder_id
                        }
                    })
                }

                // try {
                //     const res = await payTicket(this.torder_id, 2)
                //     if(res.status == 1) {
                //         if(!this.loopTimer) {
                //             this.loopTimer = setInterval(() => {
                //                 this.orderStatusLoop()
                //             }, 1e3)
                //         }
                //         let mini = res.data.wxpayinfo
                //         if(mini.appId&&mini.timeStamp&&mini.nonceStr&&mini.package&&mini.signType&&mini.paySign) {
                //             let path = `/pages/pay/index?appId=${mini.appId}&timeStamp=${mini.timeStamp}&nonceStr=${mini.nonceStr}&package=${encodeURIComponent(mini.package)}&signType=${mini.signType}&paySign=${encodeURIComponent(mini.paySign)}`;
                //             wx.miniProgram.navigateTo({
                //                 url: path
                //             })
                //         }
                //     }else {
                //         this.$toast(res.msg)
                //     }
                // } catch (error) {
                //     console.log(error)
                // }
            },
            // async orderStatusLoop() {
            //     try {
            //         const res = await perOrderStatus(this.torder_id)
            //         if(res.status == 1) {
            //             //1待审核，2待付款，3已完成（已付款），5已取消，6已退款
            //             if (res.data.order_status != 2) {
            //                 if (res.data.order_status == 3) {
            //                     //支付成功清理缓存
            //                     this.$router.replace({
            //                         path: '/success',
            //                         query: { 
            //                             torder_id: this.torder_id,
            //                             type: 1
            //                         }
            //                     });
            //                 } else {
            //                     //用户未支付系统自动取消
            //                     // v.$router.replace({ path: '/pw/person/order_detail', query: { 'torder_id': this.torder_id } });
            //                 }
            //             }
            //         }else {

            //         }
            //     } catch (error) {
            //     }
            //     // per_order_status
            // },
        }
    }
</script>

<style scoped lang="scss">
    .list {
        min-height: 100vh;
        background-color: #EEEEEE;
        padding: 20px 0 70px 0;

        .item {
            border-radius: 0px 0px 24px 24px;
            margin-bottom: 20px;
            background-color: #fff;

            p {
                background-color: #F17F2A;
                height: 80px;
                color: #fff;
                font-size: 30px;
                line-height: 80px;
                padding: 0 30px;

                &.cancel {
                    background-color: rgba(241, 127, 42, .3);
                    color: #323232;
                }
            }

            .infobox {
                padding: 20px 0;
                margin: 0 30px;
                border-bottom: 2px solid $bordercolor;

                /deep/ .van-image {
                    margin-right: 22px;

                    img {
                        border-radius: 18px;
                    }
                }

                .info {
                    .title {
                        color: $fzColor;
                        font-size: 32px;
                        min-height: 60px;
                    }

                    .ic {
                        margin-bottom: 21px;

                        &:nth-of-type(4) {
                            margin-bottom: 0;
                        }

                        span {
                            font-size: 28px;
                            color: $fzColor;
                            margin-left: 21px;
                        }
                    }
                }
            }

            .btns {
                padding: 30px;

                .price {
                    color: $fzColor;
                    font-size: 30px;

                    .money {
                        font-size: 36px;
                        color: $priceColor;
                    }
                }

                .btnbox {
                    .btn {
                        width: 156px;
                        height: 60px;
                        border: 2px solid rgba(241, 127, 42, 1);
                        border-radius: 12px;
                        text-align: center;
                        line-height: 60px;
                        color: #F17F2A;

                        &.pay {
                            background-color: #F17F2A;
                            color: #fff;
                            margin-left: 30px;
                        }
                    }
                }
            }
        }
    }
</style>